<template>
    <div class="header-container"> 
          这里是Header
    </div>
</template>
<script>
import { mapState, mapMutations, mapActions } from "vuex";
export default {
   data() {
      return {
         timer:null,
         value:'',
         options: [{
          value: 'HTML',
          label: 'HTML'
        }, {
          value: 'CSS',
          label: 'CSS'
        }, {
          value: 'JavaScript',
          label: 'JavaScript'
        },
        {
          value: 'JS',
          label: 'JS'
        },
        {
          value: 'JQ',
          label: 'JQ'
        },
        {
          value: 'React',
          label: 'React'
        },
        {
          value: 'Vue',
          label: 'Vue'
        }],
        selectedList: []
      }
   },
   created(){
   },
   computed:{
        // 调用登录模态框显示的属性
    ...mapState({
         isShowLoginModal: (state) => state.showModal.isShowLoginModal, 
    }),
    ...mapState("home",["searchText","selectedTab"]),

   //  上边这种state的写法， 还能够更改成下面这种写法
    // ...mapState({
    //   toastMsg:state=>state.showToast.toastMsg,
    //   toastType:state=>state.showToast.toastType,
    // }) 
    ...mapState("showToast", ["toastMsg", "toastType"]),
   }, 
   methods:{
      handleChange(){ 
         if(this.timer){
            return;
         }
         this.timer= setTimeout(() => {
            console.log("选择改变");
            this.changeSelectedTab(this.selectedList);
            this.timer=null;
         },500)
      },
      handleEnter(){ 
         console.log("按下了回车"); 
         this.changeSearchText(this.value);
         console.log(this.searchText,"meps传来的值");
      }, 
      clearInput(){
         console.log("清空输入框");
      },
      clearData(){
         console.log("清空数据");
      }, 
      handleBlur(e){
         console.log("handleBlur",e)
         this.$refs.selectRef.blur();
      }, 
      // 这里只是为了演示vuex中state ,muations,actions的使用
       // 调用登录模态框的方法
      // ...mapMutations({
      //    changeIsShowLoginModal: "showModal/changeIsShowLoginModal",
      //    changeIsLogined: "loginStatus/changeIsLogined",
      //    changeSearchText: "home/changeSearchText",
      //    changeSelectedTab: "home/changeSelectedTab",
      // }),
      // 以上的vuex中传来的值， 也可以这样写，但是这样写就会出现很多的mapMutations
      ...mapMutations("home",["changeSearchText","changeSelectedTab"]),
      // ...mapMutations("changeSelectedTab",["changeSelectedTab"]),
      // ...mapActions({
      //    asyncIsShowToast: "showModal/asyncIsShowToast",
      //    asyncIsShowToast2: "showModal/asyncIsShowToast2",
      // }),
      // 调用提示框状态修改方法，包含自动关闭  仍然推荐上面这种写法
      ...mapActions("showToast", ["asyncIsShowToast", "asyncIsShowToast2"]), // 提示框状态修改方法，包含自动关闭
      },   
}
</script>
<style scoped lang="scss"> 
.header-container{
   width: 100%;
   height: 100%;background-color: #5591e4fd;
   display: flex;
   padding: 0 12px;
   box-sizing: border-box;
   justify-content: space-between;
   align-items: center;
   .titles{
      display: flex;
      justify-content: space-between;
      width: 260px;
      align-items: center;

      .image{
         width: 80px;
         height: 50px;
         background:#fff url('@/assets/loginLogo.jpeg') no-repeat center;
         background-size: cover;
         color: #fff;
      }
      .title{
         font-size: 20px;
         font-family: "楷体";
         font-weight: bold;
         color: #fff;
      }
   }
   .opt{
      display: flex;
      align-items: center; 
      .info{
         width: 124px;
         display: flex;
         margin-left: 12px;
         justify-content: space-around;
         align-items: center;
         .person{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: start;
            cursor: pointer;
            font-family: "楷体";
            height: 32px;
            font-size: 13px;
            color: #fff;
         }
      }

      ::v-deep .el-input--small {
         font-size: 13px;
         width: 174px; 
         color: #fff;
      }
      ::v-deep .el-input--small .el-input__inner {
         background-color: #405573;
         color: #fff;
      }
      ::v-deep .el-select__input { 
         color: #fff; 
      }
   }
}
</style>
